<template>
	<view>
		<view class="shop-box f-row-Hcenter">
			<view class="img"><image :src="optionLoad.item.pic_url || 'http://p1.itc.cn/q_70/images03/20200929/d44f8b4e0adf4778871d38623779ee5c.png'"></image></view>
			<view class="info f-column-between">
				<view class="line f-row-Hcenter">
					<label>货号：</label>
					<label>{{ optionLoad.item.item_subno }}</label>
				</view>
				<view class="line f-row-Hcenter">
					<label>条码：</label>
					<label>{{ optionLoad.item.item_barcode }}</label>
				</view>
				<view class="line item_name f-row-Hcenter">
					<label>品名：</label>
					<label>{{ optionLoad.item.item_name }}</label>
				</view>
				<view class="line f-row-Hcenter">
					<label>单位：</label>
					<label>{{ optionLoad.item.unit_name }}</label>
				</view>
			</view>
		</view>
		<view class="query-box f-row-Hcenter f-row-between">
			<view class="input-box f-row-Hcenter f-row-between">
				<input type="text" v-model="query.branch_jg" placeholder="请输入机构名称/机构编号" />
				<view class="query-block f-row-Hcenter" @click="getlogin"><view class="query icons iconchazhaochaxun"></view></view>
			</view>
		</view>
		<view class="tietle-box"><sun-tietleBox :tietleData="'机构库存'" :showLine="false"></sun-tietleBox></view>
		<view :id="idTopHeight" class="table-box f-row-Wcenter" :style="{ padding: 0 + ' ' + tableMargin + 'rpx' }">
			<scroll-view :scroll-y="true" class="scroll-Y" :style="{ maxHeight: topHeight + 'rpx' }" @scrolltolower="lower">
				<view class="item" v-for="item in resData.list">
					<view class="line">
						<label>{{ item.branch_jg }}</label>
						<label>{{ item.branch_name }}</label>
					</view>
					<view class="line f-row-Hcenter f-row-between">
						<view class="">
							<label>数量：</label>
							<label>{{ item.stock_qty }}</label>
						</view>
						<view class="">
							<label>均价：</label>
							<label>{{ item.cost_prc | toFIex}}</label>
						</view>
						<view class="">
							<label>金额：</label>
							<label>{{ item.cost_amt | toFIex}}</label>
						</view>
					</view>
				</view>
				<view class="toastTitle">{{ query.toastTitle }}</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import sunTietleBox from '@/components/sun-titleBox/sun-tietleBox.vue';
export default {
	components: {
		sunTietleBox
	},
	data() {
		return {
			query: {
				branch_jg: '',
				item_id: ''
			},
			optionLoad: {},
			resData: {
				appstockrec: {},
				list: []
			},
			//列表高度
			idTopHeight: 'table-box',
			tableMargin: 20,
			topHeight: 100
		};
	},
	onLoad: function(option) {
		this.optionLoad = JSON.parse(option.data);
		this.optionLoad.item.item_id = this.optionLoad.item.item_id || '';

		this.query = this.optionLoad.query;
		this.query.item_id = this.optionLoad.item.item_id;
		this.getlogin();
	},
	methods: {
		getlogin() {
			if (this.query.item_id == '') {
				uni.navigateBack({});
				return;
			}

			let query = this.query;
			this.$api_server.dwzy_GetAppStockAnalysis({
				data: query,
				success: res => {
					if (res.data) {
						//头
						let query = this.query;
						//分页和汇总
						let appstockrec = res.data.data.appstockrec;
						for (let key in this.resData.appstockrec) {
							if (appstockrec[key]) {
								this.resData.appstockrec[key] = { ...this.resData.appstockrec[key], ...this.$util.moneyUnit(appstockrec[key]) };
							}
						}
						//分页数据
						if (query.pageindex == 1) {
							this.resData.list = res.data.data.appstockdetail;
						} else {
							this.resData.list = [...this.resData.list, ...res.data.data.appstockdetail];
						}
						this.$util.getTopHeight(this, this.idTopHeight, this.tableMargin);
						//尾部
						let listlength = this.resData.list.length;
						let totalCount = appstockrec.rec_tot;
						query.totalPage = Math.ceil(totalCount / query.pagesize);

						if (listlength > 0) {
							if (listlength >= totalCount) {
								query.toastTitle = '没有更多了!';
							} else {
								query.toastTitle = '加载更多...';
							}
						} else {
							query.toastTitle = '没有更多了!';
						}
						//尾
						this.query = query;
					}
				},
				fail(error) {
					console.log('rerror>>>', error);
				}
			});
		},
		// 下拉刷新
		lower: function(e) {
			this.query.pageindex++;
			if (this.query.pageindex > this.query.totalPage) {
				return;
			}
			this.query.toastTitle = '加载中...';

			this.getlogin('more');
		}
	}
};
</script>

<style scoped lang="scss">
.shop-box {
	margin: 20upx 20upx 0 20upx;
	padding: 20upx;
	border-radius: 10upx;
	background: rgba(255, 255, 255, 1);
	image {
		width: 200upx;
		height: 200upx;
		border-radius: 10upx;
	}
	.info {
		margin-left: 10upx;
		.item_name {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
		}
	}
}
.query-box {
	margin: 20upx 20upx 0 20upx;
	.input-box {
		background: rgba(255, 255, 255, 1);
		border-radius: 100upx;
		height: 65upx;
		width: 100%;
		input {
			margin: 0 20upx;
			width: 100%;
		}

		.query {
			margin-right: 20upx;
			font-size: 35upx;
			font-weight: 600;
			color: rgba(118, 118, 118, 1);
		}
	}
	.Qrcode {
		margin-left: 20upx;
		font-size: 55upx;
	}
}
.tietle-box {
	margin: 0 20upx;
}
.table-box {
	.item {
		margin: 10upx 0;
		padding: 20upx;
		border-radius: 10upx;
		background: rgba(255, 255, 255, 1);
		.line {
			label {
				&:last-child {
					margin-left: 10upx;
				}
			}
		}
	}
}
.toastTitle {
	width: 100%;
	text-align: center;
	color: rgba(216, 216, 216, 0.9);
}
</style>
